<!-- eslint-disable vue/valid-v-else -->
<template>
	<div class="building-item">
		<div class="title">
			<img :src="require('./../image/building_icon.png')" alt="" />
			<h3>{{ details?.address || '-' }}</h3>
			<img
				:src="require('./../image/location.png')"
				alt=""
				@click="toMap"
			/>
		</div>

		<div class="item">
			<p>房屋编号</p>
			<p>{{ details?.fwbh || '-' }}</p>
		</div>
		<div class="item">
			<p>房主姓名</p>
			<p>{{ details?.hzxm || '-' }}</p>
		</div>
		<div class="item">
			<p>自查状态</p>
			<p :style="{ color: colorEnum[details?.zczt] }">
				{{ zcEnum[details?.zczt] || '-' }}
				<span v-if="details?.zcsj"  >(上次自查时间：{{ details?.zcsj }})</span>
			</p>
		</div>
		<div class="item status">
			<p>检查状态</p>
			<p :style="{ color: colorEnum[details?.jczt] }" style="width: 100%;">
				{{ jcEnum[details?.jczt] || '-' }}
				<span
					v-if="isVisible"
					:style="{ color: getColorForStatus(Fwzt[details?.jczt]) }"
					>
					({{ details?.jcr || '-' }}-{{ Fwzt[details?.fwztjc] || '-' }}-{{ details?.jcsj || '-' }})
					</span>
			</p>

		</div>
		<div class="item status">
			<p>乡镇核验</p>
			<p :style="{ color: colorEnum[details?.jzpczt] }">
				{{ jzEnum[details?.jzpczt] || '-' }}
				<span
					v-if="isVisible"
					:style="{ color: getColorForStatus(Fwzt[details?.jzpczt]) }"
					>
					({{ details?.jzhcr || '-' }}-{{ Fwzt[details?.fwztjzhc] || '-' }}-{{ details?.jzhcsj || '-' }})

					</span>
			</p>
		</div>

		<div class="item status">
			<p>区级核验</p>
			<p :style="{ color: colorEnum[details?.qjpczt] }">
				{{ qjEnum[details?.qjpczt] || '-' }}
				<!-- <span v-if="details?.qjhcsj"  >(上次核验时间：{{ details?.qjhcsj }})</span> -->
				<span
					v-if="details?.qjhcsj"

					>
					<span v-if="details?.qjhcr" >(上次核验时间：{{ details?.qjhcsj}}({{ details?.qjhcr}}))</span>
					<span  v-else="details?.qjhcr" >(上次核验时间：{{ details?.qjhcsj || '-' }})</span>
					</span>
			</p>
		</div>

		<div class="item status">
			<p>市级核验</p>
			<p :style="{ color: colorEnum[details?.sjpczt] }">
				{{ sjEnum[details?.sjpczt] || '-' }}
				<!-- <span v-if="details?.sjhcsj"  >(上次核验时间：{{ details?.sjhcsj }})</span> -->
				<span
					v-if="details?.sjhcsj"  >
					<span  v-if="details?.sjhcr" >(上次核验时间：{{ details?.sjhcsj}}({{ details?.sjhcr}}))</span>
					<span  v-else="details?.sjhcr" >(上次核验时间：{{ details?.sjhcsj || '-' }})</span>
					</span>
			</p>
		</div>
		<div class="item" v-if="+details?.daydifference > 5">
			<p style="width: 100%; color: rgb(255, 217, 115)">距上次自查时间已超{{ details?.daydifference }}天</p>
		</div>
		<div class="btns">
			<div @click="toPage(1)">自查记录</div>
			<div @click="toPage(11)">检查记录</div>
			<div @click="toPage(2)">核验记录</div>
			<div @click="toPage(3)">隐患记录</div>
			<div @click="toCheck">
				隐患核验
			</div>
		</div>
	</div>
</template>

<script setup>
import { defineProps, defineEmits,computed  } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

const props = defineProps({
	details: {
		type: Object,
		default: () => {}
	}
})

const router = useRouter()
const emits = defineEmits(['beforeLeave'])

const zcEnum = {
	0: '未自查',
	1: '已自查',
	2: '已自查',
}
const jcEnum = {
	0: '未检查',
	1: '已检查',
	2: '已检查',
}
const jzEnum = {
	0: '未核验',
	1: '已核验',
	2: '已核验',
}

const qjEnum = {
	0: '未核验',
	1: '已核验',
	2: '已核验',
}
const sjEnum = {
	0: '未核验',
	1: '已核验',
	2: '已核验',
}
const colorEnum = {
	1: '#3DC018',
	2: '#3DC018',
}
const Fwzt = {
	0: '正常出租',
	1: '不出租',
	2: '已拆除',
}

const getColorForStatus = (status) => {
	switch (status) {
      case '不出租': return 'red';  // 假设是某种状态
      case '已拆除': return 'red';
      case '正常出租': return 'green';
      default: return '#3DC018';
    }
}
// 计算是否显示的条件
const isVisible = computed(() => {
  return props.details?.jzpczt && (Fwzt[props.details.jzpczt] === '不出租' || Fwzt[props.details.jzpczt] === '已拆除');
});
const toCheck = () => {
  if (props.details?.fwzt) {
    Toast(+props.details?.fwzt === 1 ? '该房屋不出租' : '该房屋已拆除')
    return
  }
	emits('beforeLeave')
	router.push({
		name: 'verification-village-collect',
		query: {
			id: props.details?.id,
			fwbh: props.details?.fwbh
		}
	})
}

const toMap = () => {
	emits('beforeLeave')
	router.push({
		name: 'verification-mapbox',
		query: {
			geojson: props.details?.feature
		}
	})
}

const toPage = (type) => {
	emits('beforeLeave')
	if (type === 11) {
		router.push({
			name: 'check-record-record-type',
			query: {
				type: 2,
				id: props.details?.fwbh,
				date: JSON.stringify([])
			}
		})
	} else {
		router.push({
			name: 'verification-record-record-type',
			query: {
				type,
				id: props.details?.fwbh,
				date: JSON.stringify([])
			}
		})
	}
}
</script>

<style scoped lang="less">
.building-item {
	position: relative;
	margin: 0 20px 24px;
	background: #fff;
	box-shadow: 0 4px 8px 0 rgba(191, 191, 191, .5);
	border-radius: 12px;
	box-sizing: border-box;
	padding: 24px 32px 0;
	.title {
		display: flex;
		img {
			width: 48px;
			height: 48px;
		}
		h3 {
			width: 0;
			flex: 1;
			margin-left: 12px;
		}
	}
	.days {
		position: absolute;
		right: 54px;
		bottom: 132px;
		width: 150px;
	}
	.item {
		display: flex;
		margin-top: 12px;
		p {
			min-height: 40px;
			line-height: 40px;
			span {
				color: #696969;
				font-size: 24px;
			}
			&:nth-of-type(1) {
				color: #A0A0A0;
				width: 140px;
			}
			&:nth-of-type(2) {
				width: 0;
				flex: 1;
				color: #696969;
			}
		}
	}
	.btns {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		border-top: 2px solid var(--border-color);
		margin-top: 24px;
		padding: 20px 0;
		div {
			height: 50px;
			line-height: 50px;
			color: var(--van-primary-color);
			border-radius: 12px;
			font-size: 26px;
			&:nth-last-of-type(1) {
				background: var(--van-primary-color);
				color: #fff;
				padding: 0 12px;
			}
		}
	}

	.btn {
		display: flex;
		border-top: 1px solid var(--border-color);
		text-align: center;
		p {
			flex: 1;
			height: 88px;
			line-height: 88px;
			font-size: 32px;
			&:nth-of-type(1) {
				color: var(--time-color);
			}
			&:nth-last-of-type(1) {
				color: var(--van-primary-color);
				border-left: 1px solid var(--border-color);
			}
		}
	}
}
</style>
